<template>
	<view class="my">
		<cu-custom bgColor="bg-gradual-orange" :isBack="true">
			<block slot="content">个人中心</block>
		</cu-custom>
		<view class="bottom-info">
			<view class="info-row">

				<view class="row-item" @tap="jumpTo('/pages/my/profile', 'inside', true)">
					<view class="item-name">
						<image src="/static/shop/1.png" mode="aspectFill"></image>个人资料
					</view>
					<view class="item-img cuIcon-right right-icons"></view>
				</view>
				<view class="row-item" @tap="jumpTo('/pages/my/changePwd', 'inside', true)">
					<view class="item-name">
						<image src="/static/shop/2.png" mode="aspectFill"></image>修改密码
					</view>
					<view class="item-img cuIcon-right right-icons"></view>
				</view>

			</view>
		</view>
		<view class="padding flex flex-direction">
			<button class="cu-btn bg-gradual-orange margin-tb-sm lg" @tap="logout">退出登录</button>
		</view>
	</view>

</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import user from '@/api/user';
	import shop from '@/api/shop';
	export default {
		data() {
			return {
				share: {
					path: '/pages/coupon/index',
					title: '您有一张专属优惠券',
					imageUrl: '/static/share_3.png'
				},
				tipStatus: false,
				modalName: 'Modal',
				VIP: 1,
				user_level: 0,
			}
		},
		computed: {
			...mapState(['config', 'hasLogin', 'userInfo']),
		},
		onLoad(options) {
		},
		onShareAppMessage(res) {
			return {
				path: this.share.path + '?outPutUid=' + this.userInfo.id,
				title: this.share.title,
				imageUrl: this.share.imageUrl
			}
		},
		methods: {
			logout() {
				// 登录账号
				user.logout().then(res => {
					uni.hideLoading();
					if (res.code !== 1) {
						return this.toast(res.msg)
					}
					if (res.code === 1) {
						this.$store.commit('logout');
						uni.navigateBack();
					}
				})
			},
		}
	}
</script>

<style lang="less">
	.vip {
		display: flex;
		justify-content: center;
		height: 30px;
		line-height: 30px;

		// margin-left:50px;
		image {
			width: 100px;
			height: 60px;
			margin-left: 50px;
		}
	}

	.my {
		padding-bottom: 10px;
		// height: 100vh;
		background-color: #f7f7f7;

		.top-header {
			height: 200px;
			background-image: linear-gradient(45deg, #ff9700, #fee12e);
			// background: url(../../static/my_bg.png) no-repeat center center;
			// background-size: cover;
			text-align: left;
			padding: 0 30rpx;

			.avatar-info {
				position: relative;
				width: 73px;
				float: left;
			}

			.avatar {
				width: 73px;
				height: 73px;
				margin: 20px auto 0;
				border: 2px solid #FFA39F;
				border-radius: 50%;
			}

			.avatar-vip {
				width: 24px;
				height: 24px;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				bottom: -4px;
			}

			.user-info {
				// text-align: center;
				padding-top: 50rpx;
				margin-left: 40rpx;
				font-family: SimHei;
				font-weight: 550;
				display: inline-block;
				padding-bottom: 40rpx;

				.user-name {
					font-size: 36rpx;
					color: #fff;
				}

				.user-uid {
					font-size: 33.88rpx;
					color: #fff;
					margin-top: 5px;
				}

				.user-copy {
					font-size: 12px;
					letter-spacing: 0;
					background: #F8ACA9;
					color: #fff;
					border-radius: 20px;
					padding: 2px 6px;
					margin-left: 10px;
				}
			}

			.login-info {
				display: block;
				width: 150rpx;
				float: left;
				margin-left: 0;
				font-size: 35rpx;
			}
		}

		.my-service {
			margin: 0 30rpx;
			text-align: center;
			margin-top: -150rpx;
			background-color: #ffffff;
			border-radius: 15rpx;
			font-family: SimHei;
			padding-bottom: 40rpx;

			.column-title {
				height: 80rpx;
				line-height: 80rpx;
				background-color: #f89a81;
				color: #fff;
				font-size: 40rpx;
				text-indent: 1em;
				text-align: left;
				border-top-right-radius: 15rpx;
				border-top-left-radius: 15rpx;
			}

			.colum-list {
				display: flex;
				flex-direction: row;
				justify-content: space-around;
			}

			.colum-items {
				text-align: center;
				color: #3f3d3d;
				font-size: 26rpx;
				font-family: "宋体";

				.colum-items-icon {
					margin: 10rpx;
					margin-top: 40rpx;
					margin-bottom: 20rpx;
					width: 100rpx;
					height: 100rpx;
					line-height: 100rpx;
					font-size: 60rpx;
					// background-color: #f9c737;
					color: #fff;

					// -webkit-border-radius: 50%;
					// border-radius: 50%;
					image {
						width: 50px;
						height: 50px;
					}
				}

				.invite-icon {
					background-color: #36a1fc;
				}

				.fans-icon {
					background-color: #d326fc;
				}

				.focus-icon {
					background-color: #ee6d47;
				}
			}
		}

		.middle-ad {
			height: 75px;
			margin: 10px 15px 20px;
			border-radius: 4px;
			background: url(../../static/my_ad.png) no-repeat center center;
			background-size: cover;
		}

		.bottom-info {
			background-color: #ffffff;
			color: #333333;
			font-family: '宋体';
			font-size: 30rpx;
			margin-bottom: 20rpx;

			.row-item {
				display: flex;
				justify-content: space-between;
				align-items: space-between;
				height: 80rpx;
				line-height: 80rpx;
				padding: 0 20rpx;
				border-bottom: 1rpx solid #f7f7f7;

				.right-icons {
					float: right;
					// margin-right: 20rpx;
					color: #b3b3b3;
				}

				.item-name {
					display: flex;
					justify-content: flex-start;
					align-items: center;

					// padding-left: 60rpx;
					image {
						width: 25px;
						height: 25px;
					}
				}

				.shop-in::before {
					content: '';
					width: 40rpx;
					height: 40rpx;
					position: absolute;
					left: 1rpx;
					top: 20rpx;
					background-size: 100%;
					background-repeat: no-repeat;
					background-image: url(../../static/in.png);
				}

				.develop-home::before {
					content: '';
					width: 40rpx;
					height: 40rpx;
					position: absolute;
					left: 1rpx;
					top: 20rpx;
					background-size: 100%;
					background-repeat: no-repeat;
					background-image: url(../../static/tuodian.png);
				}

				.area-manger::before {
					content: '';
					width: 40rpx;
					height: 40rpx;
					position: absolute;
					left: 1rpx;
					top: 20rpx;
					background-size: 100%;
					background-repeat: no-repeat;
					background-image: url(../../static/quyu-icon.png);
				}

				.apply-develop::before {
					content: '';
					width: 40rpx;
					height: 40rpx;
					position: absolute;
					left: 1rpx;
					top: 20rpx;
					background-size: 100%;
					background-repeat: no-repeat;
					background-image: url(../../static/tuodian.png);
				}

				.apply-invite::before {
					content: '';
					width: 40rpx;
					height: 40rpx;
					position: absolute;
					left: 1rpx;
					top: 20rpx;
					background-size: 100%;
					background-repeat: no-repeat;
					background-image: url(../../static/invite-icon.png);
				}

				.contact-service::before {
					content: '';
					width: 40rpx;
					height: 40rpx;
					position: absolute;
					left: 1rpx;
					top: 20rpx;
					background-size: 100%;
					background-repeat: no-repeat;
					background-image: url(../../static/kefu.png);
				}

				.agree-note::before {
					content: '';
					width: 40rpx;
					height: 40rpx;
					position: absolute;
					left: 1rpx;
					top: 20rpx;
					background-size: 100%;
					background-repeat: no-repeat;
					background-image: url(../../static/xieyi.png);
				}

			}

		}

		.share-btn {
			border: none;
			background: #f7f7f7;
			/* margin: 20rpx 10rpx; */
			line-height: normal;
			margin: 20rpx 10rpx;
			padding: 0;

			&::after {
				display: none;
			}

			image {
				height: 181rpx;
				max-width: 730rpx;
				width: 730rpx;
			}
		}

		.login-btn {
			font-size: 30rpx;
			background: transparent;
			border: none;
			color: #fff;
			outline: none;
			padding: 0;

			// width: 30%;
			&::after {
				display: none;
			}
		}

		.invite-tips {
			position: fixed;
			top: 0;
			width: 100vw;
			height: 100vh;
			z-index: 100;
			background-color: rgba(0, 0, 0, 0.7);
			font-family: 'SimHei';
			font-size: 40rpx;
			color: #333333;
			text-align: center;

			.invite-body {
				position: absolute;
				width: 500rpx;
				left: 125rpx;
				height: 308rpx;
				top: 50%;
				margin-top: -154rpx;
				background-color: #ffffff;
				-webkit-border-radius: 5px;
				border-radius: 30rpx;

				.invite-title {
					padding-top: 50rpx;
					font-size: 34rpx;
					font-weight: 600;
				}

				.invite-content {
					height: 120rpx;
					line-height: 120rpx;
					font-size: 30rpx;
					color: rgb(65, 138, 110);
					border-bottom: 1rpx solid rgb(200, 230, 225);
				}

				.invite-btn {
					height: 80rpx;
					line-height: 80rpx;
					margin-top: 10rpx;

					button {
						width: 249.5rpx;
						display: inline-block;
						margin: 0;
						height: 80rpx;
						line-height: 80rpx;
						padding: 0;
						border: 0;
						border-radius: 0;
					}

					.takeCencel {
						border-right: 1rpx solid rgb(200, 230, 225);
						color: #333333;
					}

					.takeConfirms {
						color: #1CBBB4;
					}
				}
			}
		}
	}
</style>